<template>
  <div id="login">
    <van-nav-bar :fiexd='true' title="黑马头条-登录" />
    <van-form @submit="login">
      <van-field v-model="from.mobile" required name="mobile" label="手机号" placeholder="请输入手机号码" :rules="rules.mobile" />
      <van-field v-model="from.code" type="password" required name="password" label="密码" placeholder="请输入登录密码"
        :rules="rules.password" />
      <div style="margin: 16px;">
        <van-button round block type="info">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import {
    loginAPI
  } from '../api/userAPI.js'
  import {
    mapMutations
  } from 'vuex'

  export default {
    // name 是当前组件的名称（建议为每个组件都指定唯一的 name 名称）
    name: 'Login',
    data() {
      return {
        from: {
          mobile: '',
          code: '',
        },
        rules: {
          mobile: [{
              required: true,
              message: '请填写手机号码',
              titgger: 'onBlur',
            },
            {
              pattern: /^1\d{10}$/,
              message: '请您输入正确的手机号',
              titgger: 'onBlur',
            }
          ],
          password: [{
            required: true,
            message: '请填写登录密码',
            titgger: 'onBlur',
          }],
        },
      };
    },
    methods: {

      async login() {
        // console.log('ok')
        //调用api
        const {
          data: res
        } = await loginAPI(this.from)


        if (res.message === 'OK') {
          this.updataTokenInfo(res.data)
          // console.log(this.updataTokenInfo)
          console.log(this.$router)
          if (this.$router.currentRoute.query.url == 'login') {
            console.log('1')
            this.$router.push('/')
          } else {
            console.log('2')
            console.log(this.$router.currentRoute)

            this.$router.push('/')
          }
          // 2. 要跳转到首页
          const navPath = this.$route.query.pre || '/'
          this.$router.replace(navPath)

        }
      },
      ...mapMutations(['updataTokenInfo'])
    }
  };
</script>

<style lang="less" scoped>
  #login {
    // padding-top: 46px;
  }

  #login .van-nav-bar {
    background-color: #307df6;
  }
</style>
